{% extends 'cms/base.html' %}

{% block title %}
    轮播图管理
{% endblock %}

{% block head %}
    <style>
    .btn-group{
        float: left;
    }
    .tips{
        float:left;
    }
    .banner-item{
        width:800px;
    }
    .thumbnail-group{
        float:left;
        width:230px;

    }
    .thumbnail-group .thumbnail{
        width: 100%;
        height: 84px;

    }
    .more-group{
        float:left;
        margin-left:20px;
        width:500px;
    }
    </style>
    <script src="{% static 'arttemplate/template-web.js' %}"></script>
    <script src="{% static 'js/banners.min.js' %}"></script>

{% endblock %}


{% block content-header %}
    <h1>轮播图管理</h1>
{% endblock %}


{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group">
                <button class="btn btn-primary" id="add-banner-btn">
                    <i class="fa fa-plus"></i>
                    添加轮播图

                </button>
            </div>
            <ul class="tips">
                <li>支持JPG,GIF,PNG格式， 最多可上传6张</li>
                <li>比例4：1，宽度在800px以上， 5M以内</li>

            </ul>
        </div>
    </div>
    <div class="banner-list-group"></div>
<script id="banner-item" type="text/html">
    {% verbatim %}
        {{ if banner }}
            <div class="box banner-item" data-banner-id="{{ banner.id }}">
        {{ else }}
            <div class="box banner-item">
        {{ /if }}
                <div class="box-header">
                    {{ if banner }}
                        <span class="priority">优先级:{{ banner.priority }}</span>
                    {{ else }}
                        <span class="priority">优先级: 0</span>
                    {{ /if }}
                    <button class="btn btn-default btn-xs pull-right close-btn">
                        <i class="fa fa-close"></i>
                    </button>
                </div>
                <div class="box-body">
                    <div class="thumbnail-group">
                        <input type="file" style="display: none;" class="image-input">
                        {{ if banner }}
                            <img src="{{ banner.image_url }}" alt="" class="thumbnail">
                        {{ else }}
                            <img src="/static/images/banner.png" alt="" class="thumbnail">
                        {{ /if }}

                    </div>
                    <div class="more-group">
                        <div class="form-group">
                            {{ if banner }}
                                <input type="number" class="form-control" name="priority" value="{{ banner.priority }}">
                            {{ else }}
                                <input type="number" class="form-control" name="priority">
                            {{ /if }}
                        </div>
                        <div class="form-group">
                            {{ if banner }}
                                <input type="text" class="form-control" name="link_to" value="{{ banner.link_to }}">
                            {{ else }}
                                <input type="text" class="form-control" name="link_to">
                            {{ /if }}

                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <button class="btn btn-primary pull-right save-btn">保存</button>
                </div>
            </div>
    {% endverbatim %}
</script>
{% endblock %}







